<template>
  <xh-container btnText="保存" @onSave="handleClickSubmit" title="详情">
    <view style="height: 10px"></view>
    <uni-forms
      ref="form1"
      :rules="rules1"
      :modelValue="detailData"
      :label-width="80"
      label-align="right"
    >
      <uni-forms-item required label="收回时间" name="takeBackDate">
        <uni-datetime-picker
          type="date"
          v-model="detailData.takeBackDate"
          :start="Date.now()"
        />
      </uni-forms-item>
      <uni-forms-item required label="产品名称" name="productName">
        <uni-data-select
          v-model="detailData.productName"
          :localdata="productList"
          @change="handleChangeProduct"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item required label="类型" name="type">
        <uni-data-select
          v-model="detailData.type"
          :localdata="typeOptions"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item required label="裁片编号" name="cuttingCode">
        <uni-data-select
          v-model="detailData.cuttingCode"
          :localdata="cuttingList"
          @change="handleChangeCutting"
        ></uni-data-select>
      </uni-forms-item>
      <uni-forms-item label="卡号" name="cardNo">
        <xh-data-select v-model="detailData.cardNo" :localdata="cardNoList" />
      </uni-forms-item>
      <uni-forms-item label="收回片数" name="takeBackNum">
        <uni-easyinput
          type="number"
          v-model="detailData.takeBackNum"
          placeholder="请输入收回片数"
        />
      </uni-forms-item>
      <template v-if="detailData.type === '1'">
        <uni-forms-item label="缺料总数" name="filledShortNum">
          <uni-easyinput
            type="digit"
            v-model="detailData.filledShortNum"
            placeholder="请输入缺料总数"
          />
        </uni-forms-item>
        <uni-forms-item label="换片总量" name="changeNum">
          <uni-easyinput
            type="digit"
            v-model="detailData.changeNum"
            placeholder="请输入换片总量"
          />
        </uni-forms-item>
      </template>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput v-model="detailData.remark" placeholder="请输入备注" />
      </uni-forms-item>
    </uni-forms>
    <xh-desc-item label="创建时间">{{ detailData.createTime }}</xh-desc-item>
    <xh-desc-item label="更新时间">{{ detailData.updateTime }}</xh-desc-item>
  </xh-container>
</template>

<script>
import { EmbroideryTypeEnum } from "@/utils/constant";
import {
  getRetractionCuttingList,
  editEmbroideryRetractionRecord,
  getWorkOrderList,
  getRetractionProductList,
} from "@/api/purchase/pickplanbill.js";
import { formatSelectList } from "@/utils/business.js";
import { isDecimalPlaces } from "@/utils/common";
export default {
  data() {
    return {
      detailData: {},
      cardNoList: [],
      productList: [],
      typeOptions: EmbroideryTypeEnum,
      cuttingList: [],
      rules1: {
        takeBackDate: {
          rules: [
            {
              required: true,
              errorMessage: "请选择时间",
            },
          ],
        },
        productName: {
          rules: [
            {
              required: true,
              errorMessage: "请选择产品",
            },
          ],
        },
        type: {
          rules: [
            {
              required: true,
              errorMessage: "请选择类型",
            },
          ],
        },
        cuttingCode: {
          rules: [
            {
              required: true,
              errorMessage: "请选择裁片编号",
            },
          ],
        },
      },
    };
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.form1.setRules(this.rules1);
  },
  onLoad(options) {
    this.detailData = options;
    this.fetchWorkOrderList();
  },
  mounted() {
    this.fetchProductList();
    this.fetchCuttingList();
  },
  methods: {
    handleChangeCutting(item) {
      const { value } = item;
      this.fetchWorkOrderList(value);
    },
    // 请求接口-卡号
    fetchWorkOrderList(val) {
      getWorkOrderList(val || this.detailData.cuttingCode).then((res) => {
        const { rows } = res;
        this.cardNoList = formatSelectList(rows);
      });
    },
    // 请求接口-产品名称
    fetchProductList() {
      getRetractionProductList().then((res) => {
        const { rows } = res;
        this.productList = formatSelectList(rows);
      });
    },
    // 产品名称切换时
    handleChangeProduct() {
      this.fetchCuttingList();
    },
    // 请求接口-裁片
    fetchCuttingList() {
      const { productName } = this.detailData;
      let params = {
        productName,
      };
      getRetractionCuttingList(params).then((res) => {
        const { rows } = res;
        this.cuttingList = formatSelectList(rows, "cuttingCode");
      });
    },
    // 提交
    handleClickSubmit() {
      this.$refs.form1
        .validate()
        .then(() => {
          const params = this.detailData;
          params.params = {};
          const { changeNum, filledShortNum } = params;
          if (!isDecimalPlaces(changeNum) || !isDecimalPlaces(filledShortNum)) {
            this.$modal.msgError("保留两位小数！");
            return;
          }
          editEmbroideryRetractionRecord(params).then(() => {
            this.$modal.msgSuccess("操作成功！");
            this.$nav.navigateBack();
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>
